<template>
  <div class="chart-components">
    <div class="component-container">
      <!-- 搜索和分类 -->
      <div class="search-section">
        <el-input
          v-model="searchText"
          placeholder="搜索图表组件..."
          size="large"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <div class="chart-categories">
          <el-tag 
            v-for="category in categories"
            :key="category.value"
            :class="{ active: selectedCategory === category.value }"
            @click="selectedCategory = category.value"
            class="category-tag"
          >
            {{ category.label }}
          </el-tag>
        </div>
      </div>

      <!-- 图表组件网格 -->
      <div class="charts-grid">
        <el-row :gutter="24">
          <el-col
            :xl="8" :lg="12" :md="12" :sm="24"
            v-for="chart in filteredCharts"
            :key="chart.id"
          >
            <el-card class="chart-card" shadow="hover">
              <div class="chart-preview">
                <div class="preview-image" :style="{ background: chart.gradient }">
                  <el-icon :size="48" class="chart-icon">
                    <component :is="chart.icon"/>
                  </el-icon>
                </div>
              </div>
              
              <div class="chart-info">
                <h3>{{ chart.name }}</h3>
                <p>{{ chart.description }}</p>
                
                <div class="chart-tags">
                  <el-tag v-for="tag in chart.tags" :key="tag" size="small">
                    {{ tag }}
                  </el-tag>
                </div>
                
                <div class="chart-features">
                  <div class="feature-item" v-for="feature in chart.features" :key="feature">
                    <el-icon><Check /></el-icon>
                    <span>{{ feature }}</span>
                  </div>
                </div>
                
                <div class="chart-actions">
                  <el-button type="primary" @click="viewDemo(chart)">
                    <el-icon><View /></el-icon>
                    查看示例
                  </el-button>
                  <el-button @click="getCode(chart)">
                    <el-icon><CopyDocument /></el-icon>
                    获取代码
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 图表库介绍 -->
      <div class="chart-library-info">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><TrendCharts /></el-icon>
              <span>图表库推荐</span>
            </div>
          </template>
          
          <div class="library-grid">
            <div class="library-item" v-for="lib in chartLibraries" :key="lib.name">
              <div class="lib-header">
                <div class="lib-icon" :style="{ background: lib.color }">
                  {{ lib.name.charAt(0) }}
                </div>
                <div class="lib-info">
                  <h4>{{ lib.name }}</h4>
                  <p>{{ lib.description }}</p>
                </div>
              </div>
              
              <div class="lib-features">
                <el-tag v-for="feature in lib.features" :key="feature" size="small">
                  {{ feature }}
                </el-tag>
              </div>
              
              <div class="lib-actions">
                <el-button size="small" @click="openLibrary(lib.url)">
                  访问官网
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Search, View, CopyDocument, Check, TrendCharts,
  PieChart, DataLine, Histogram, ScaleToOriginal
} from '@element-plus/icons-vue'

const searchText = ref('')
const selectedCategory = ref('all')

// 分类数据
const categories = ref([
  { label: '全部', value: 'all' },
  { label: '基础图表', value: 'basic' },
  { label: '统计图表', value: 'statistics' },
  { label: '关系图表', value: 'relationship' },
  { label: '地理图表', value: 'geo' }
])

// 图表组件数据
const charts = ref([
  {
    id: 1,
    name: '折线图',
    description: '用于展示数据在时间序列上的趋势变化',
    icon: 'DataLine',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    category: 'basic',
    tags: ['趋势', '时间序列', '连续数据'],
    features: ['多系列支持', '缩放功能', '数据标注', '响应式']
  },
  {
    id: 2,
    name: '柱状图',
    description: '通过柱子的高度来表现数据的大小',
    icon: 'Histogram',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    category: 'basic',
    tags: ['对比', '分类数据', '排序'],
    features: ['分组对比', '堆叠模式', '动画效果', '自定义颜色']
  },
  {
    id: 3,
    name: '饼图',
    description: '显示各部分占整体的比例关系',
    icon: 'PieChart',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    category: 'statistics',
    tags: ['比例', '占比', '分布'],
    features: ['环形图', '南丁格尔图', '标签引导线', '动画展示']
  },
  {
    id: 4,
    name: '散点图',
    description: '用于发现变量间的关系模式',
    icon: 'ScaleToOriginal',
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    category: 'relationship',
    tags: ['相关性', '分布', '聚类'],
    features: ['气泡图', '回归线', '数据刷选', '动态更新']
  },
  {
    id: 5,
    name: '面积图',
    description: '展示数值随时间的变化趋势和累积关系',
    icon: 'TrendCharts',
    gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    category: 'basic',
    tags: ['累积', '趋势', '堆叠'],
    features: ['堆叠面积', '流图', '渐变填充', '交互提示']
  },
  {
    id: 6,
    name: '雷达图',
    description: '多维数据的可视化展示',
    icon: 'DataLine',
    gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    category: 'statistics',
    tags: ['多维', '对比', '能力值'],
    features: ['多边形网格', '数据填充', '多系列对比', '标签显示']
  }
])

// 图表库推荐
const chartLibraries = ref([
  {
    name: 'ECharts',
    description: '百度开源的数据可视化库，功能丰富',
    color: '#c23531',
    url: 'https://echarts.apache.org',
    features: ['丰富图表', '交互能力强', '移动端优化', '主题定制']
  },
  {
    name: 'Chart.js',
    description: '简洁易用的HTML5图表库',
    color: '#36a2eb',
    url: 'https://www.chartjs.org',
    features: ['轻量级', '响应式', '动画流畅', '插件丰富']
  },
  {
    name: 'D3.js',
    description: '数据驱动的文档操作库',
    color: '#ff6c23',
    url: 'https://d3js.org',
    features: ['灵活性高', '自定义强', '数据绑定', 'SVG支持']
  },
  {
    name: 'Highcharts',
    description: '商业级图表解决方案',
    color: '#7cb5ec',
    url: 'https://www.highcharts.com',
    features: ['商业支持', '兼容性好', '导出功能', '无障碍访问']
  }
])

// 过滤图表
const filteredCharts = computed(() => {
  let result = charts.value

  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    result = result.filter(chart => chart.category === selectedCategory.value)
  }

  // 按搜索文本筛选
  if (searchText.value) {
    result = result.filter(chart =>
      chart.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
      chart.description.toLowerCase().includes(searchText.value.toLowerCase()) ||
      chart.tags.some(tag => tag.toLowerCase().includes(searchText.value.toLowerCase()))
    )
  }

  return result
})

// 查看演示
const viewDemo = (chart) => {
  ElMessage.info(`正在加载 ${chart.name} 演示...`)
}

// 获取代码
const getCode = (chart) => {
  ElMessage.success(`${chart.name} 示例代码已准备就绪`)
}

// 打开图表库
const openLibrary = (url) => {
  window.open(url, '_blank')
}
</script>

<style scoped lang="scss">
.chart-components {
  padding: 32px;
  
  .component-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .search-section {
    margin-bottom: 32px;
    
    .el-input {
      max-width: 400px;
      margin-bottom: 20px;
    }
    
    .chart-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      
      .category-tag {
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 8px 16px;
        border-radius: 20px;
        border: 2px solid #e4e7ed;
        background: white;
        color: #606266;
        
        &:hover {
          border-color: #409EFF;
          color: #409EFF;
        }
        
        &.active {
          background: linear-gradient(135deg, #409EFF, #36CFC9);
          border-color: transparent;
          color: white;
        }
      }
    }
  }
  
  .charts-grid {
    margin-bottom: 40px;
    
    .chart-card {
      border-radius: 20px;
      border: 1px solid #f0f2f5;
      transition: all 0.3s ease;
      height: 100%;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        border-color: #409EFF;
      }
      
      .chart-preview {
        margin-bottom: 20px;
        
        .preview-image {
          height: 120px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16px;
          
          .chart-icon {
            color: white;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
          }
        }
      }
      
      .chart-info {
        h3 {
          font-size: 20px;
          font-weight: 600;
          color: #303133;
          margin: 0 0 8px 0;
        }
        
        p {
          color: #606266;
          margin: 0 0 16px 0;
          line-height: 1.6;
        }
        
        .chart-tags {
          margin-bottom: 16px;
          
          .el-tag {
            margin-right: 8px;
            margin-bottom: 6px;
            background: rgba(64, 158, 255, 0.1);
            border-color: rgba(64, 158, 255, 0.2);
            color: #409EFF;
          }
        }
        
        .chart-features {
          margin-bottom: 20px;
          
          .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            color: #606266;
            font-size: 14px;
            
            .el-icon {
              color: #67C23A;
              margin-right: 8px;
              font-size: 16px;
            }
          }
        }
        
        .chart-actions {
          display: flex;
          gap: 12px;
          
          .el-button {
            flex: 1;
            border-radius: 8px;
            
            .el-icon {
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
  
  .chart-library-info {
    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: #303133;
      
      .el-icon {
        color: #409EFF;
      }
    }
    
    .library-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      
      .library-item {
        border: 2px solid #f0f2f5;
        border-radius: 16px;
        padding: 20px;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #409EFF;
          box-shadow: 0 4px 15px rgba(64, 158, 255, 0.15);
        }
        
        .lib-header {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          
          .lib-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            font-weight: bold;
            margin-right: 16px;
          }
          
          .lib-info {
            h4 {
              font-size: 18px;
              font-weight: 600;
              color: #303133;
              margin: 0 0 4px 0;
            }
            
            p {
              color: #606266;
              margin: 0;
              font-size: 14px;
            }
          }
        }
        
        .lib-features {
          margin-bottom: 16px;
          
          .el-tag {
            margin-right: 8px;
            margin-bottom: 6px;
          }
        }
        
        .lib-actions {
          text-align: right;
          
          .el-button {
            border-radius: 8px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .chart-components {
    padding: 16px;
    
    .search-section {
      .el-input {
        max-width: 100%;
      }
    }
    
    .chart-actions {
      flex-direction: column;
      
      .el-button {
        width: 100%;
        margin: 0 0 8px 0;
      }
    }
    
    .library-grid {
      grid-template-columns: 1fr;
      
      .library-item {
        .lib-header {
          .lib-icon {
            width: 40px;
            height: 40px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
